---
title: Card
description: A flexible container component for grouping related content with optional header, footer, and content sections for consistent layouts.
---
import { BasicCard, CardWithHeader, CardWithFooter, CompleteCard, CardGrid } from "./card.example"

## Overview

The Card component provides a flexible container system for grouping related content throughout your application. It's designed to create consistent layouts with optional header, footer, and content sections while maintaining accessibility and responsive design.

## Usage

```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@unkey/ui";

export default function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Your content goes here</p>
      </CardContent>
    </Card>
  );
}
```

## Examples

### Basic Card

A simple card with just content for simple layouts.

<BasicCard />

### Card with Header

Card with a title and description in the header for introducing content sections.

<CardWithHeader />

### Card with Footer

Card with action buttons in the footer for user interactions.

<CardWithFooter />

### Complete Card

Card with header, content, and footer sections working together.

<CompleteCard />

### Card Grid

Multiple cards in a responsive grid layout for dashboard-style interfaces.

<CardGrid />

## Features

- **Composable Architecture**: Flexible subcomponents for custom layouts
- **Consistent Styling**: Built-in spacing, typography, and design system integration
- **Responsive Design**: Adapts to different screen sizes automatically
- **Accessibility**: Semantic HTML structure with proper heading hierarchy
- **Dark Mode Support**: Consistent appearance in light and dark themes
- **Customizable**: Extensive styling options through className props

## Props

### Card

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | `undefined` | Additional CSS classes |
| `children` | `React.ReactNode` | `undefined` | Card content |

### CardHeader

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | `undefined` | Additional CSS classes |
| `children` | `React.ReactNode` | `undefined` | Header content |

### CardTitle

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | `undefined` | Additional CSS classes |
| `children` | `React.ReactNode` | `undefined` | Title text |

### CardDescription

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | `undefined` | Additional CSS classes |
| `children` | `React.ReactNode` | `undefined` | Description text |

### CardContent

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | `undefined` | Additional CSS classes |
| `children` | `React.ReactNode` | `undefined` | Main content |

### CardFooter

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | `undefined` | Additional CSS classes |
| `children` | `React.ReactNode` | `undefined` | Footer content |

`<Card>` inherits all common HTML `<div>` attributes (e.g. `id`, `style`) in addition to the props listed above.

## Structure

The Card system is composed of several subcomponents that work together:

1. **Card**: Main container component  
2. **CardHeader**: Container for title and description  
3. **CardTitle**: Main heading text (`h2`)  
4. **CardDescription**: Subtitle or description text  
5. **CardContent**: Main content area  
6. **CardFooter**: Footer section with optional separator

## Styling

The Card component includes default styling with:

- Consistent spacing and typography from the design system
- Border and background styling for visual separation
- Responsive design that adapts to container size
- Dark mode support with appropriate color schemes
- Focus states for accessibility
- Customizable through className props

### Custom Styling

You can customize the appearance using className props:

```tsx
<Card className="custom-card-class">
  <CardHeader className="custom-header-class">
    <CardTitle className="custom-title-class">Custom Title</CardTitle>
  </CardHeader>
  <CardContent className="custom-content-class">
    Custom content
  </CardContent>
</Card>
```

## Accessibility

The Card component is built with accessibility in mind:

- **Semantic HTML**: Uses appropriate HTML elements (h2 for CardTitle, p for descriptions)
- **Heading Hierarchy**: Maintains proper heading hierarchy for screen readers
- **Color Contrast**: Provides sufficient color contrast between text and background
- **Keyboard Navigation**: Supports keyboard navigation through focusable elements
- **Screen Reader Support**: Announces card structure and content appropriately